<template>
  <!-- 新增报价 -->
  <div>
    <el-dialog
      v-el-drag-dialog
      title="新增报价"
      :visible.sync="visible"
      width="850px"
      @closed="reset"
    >
      <el-form ref="form" class="form" :model="query" label-position="right" label-width="80px">
        <el-form-item label="商品分类:" prop="orgSNNo">
          <el-tree-select
            v-model="shop.gtId"
            :clearable="false"
            class="tree-select"
            :popover-width="360"
            :select-params="{
              clearable: true,
              placeholder: '请选择商品分类',
              loading: $loadingPlugin.getTreeData
            }"
            :tree-params=" {
              'default-expand-all': true,
              'expand-on-click-node': false,
              'highlight-current': true,
              props:{
                value:'gtId',
                label: 'gtName',
                disabled: 'disabled',
              },
              data: goodsTreeData
            }"
            @node-click="selectTreeChange"
          />
        </el-form-item>
        <el-form-item label="商品名称:" class="merge-item">
          <el-select v-model="shop.goodsId" clearable>
            <el-option v-for="(l,i) in goodsTypesDetailList" :key="i" :value="l.goodsId" :label="l.goodsName" />
          </el-select>
        </el-form-item>
        <el-divider />
        <el-form-item label="报价类型">
          <el-select v-model="query.priceType" placeholder="请选择">
            <el-option :value="1" label="下浮" />
            <el-option :value="2" label="固定" />
          </el-select>
        </el-form-item>
        <el-form-item label="价格(元)">
          <el-input v-model="query.price" placeholder="单行输入" />
        </el-form-item>
        <div class="prompt">特别提示：<span>若报价类型选择下浮时下浮的基准值为总公司报价(非区域报价)</span></div>
        <el-divider />
        <div>相关服务费用设置</div>
        <el-form-item label="配送费">
          <el-radio-group v-model="query.radio1">
            <el-radio :label="1">市场价</el-radio>
            <el-radio :label="2">自定义</el-radio>
            <el-input v-show="query.radio1 === 2" v-model="query.spFee" placeholder="请输入配送费" style="width: 150px;" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上楼费">
          <el-radio-group v-model="query.radio2" style="display: flex; align-items: center; height: 32px;">
            <el-radio :label="1">市场价</el-radio>
            <el-radio :label="2">自定义</el-radio>
            <el-input v-show="query.radio2 === 2" v-model="query.baseFloorFee" label="报价类型" placeholder="请输入上楼费基数" style="width: 300px;">
              <template slot="prepend">上楼费基数(起步价)</template>
            </el-input>
            <el-input v-show="query.radio2 === 2" v-model="query.lpFee" placeholder="请输入上楼费" style="width: 200px;">
              <template slot="prepend">楼层费</template>
            </el-input>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务费">
          <el-radio-group v-model="query.radio3">
            <el-radio :label="1">市场价</el-radio>
            <el-radio :label="2">自定义</el-radio>
            <el-input v-show="query.radio3 === 2" v-model="query.tpFee" placeholder="请输入服务费" style="width: 150px;" />
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="save">保 存</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { goodsTypeDetail, queryPriceTypeAddPrice } from '@/api'
  export default {
    name: 'addQuotation',
    props: {
      goodsTreeData: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        visible: false,
        treeData: [],
        goodsTypesDetailList: [],
        shop: {
          gtId: null,
          goodsId: null
        },
        gtInfo: {},
        temp: {},
        priceTypeDetail: {},
        query: {
          spFee: null,
          lpFee: null,
          baseFloorFee: null,
          tpFee: null,
          gtTree: 0,
          goods: 0,
          radio1: 1,
          radio2: 1,
          radio3: 1
        }
      }
    },
    methods: {
      // 选择商品分类
      async selectTreeChange(value) {
        // this.orgSNNo = value.orgSNNo
        this.shop.goodsId = ''
        if (value) {
          this.gtInfo = value
          await this.getGoodsTypeDetails(value.gtId)
        }
      },
      // 获取商品分类详情
      async getGoodsTypeDetails(val) {
        try {
          const res = await goodsTypeDetail({ gtId: val })
          this.goodsTypesDetailList = res.data.rows
          // console.log(res)
        } catch (error) {
          console.log(error)
        }
      },
      // 打开
      open(query) {
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
          console.log(query)
          if (query) {
            this.priceTypeDetail = { ...query }
            // this.query = Object.assign(this.query, query)
          }
        })
      },
      async save() {
        const gtInfo = this.gtInfo
        const goodsId = this.shop.goodsId
        if (goodsId) {
          var goodsObj = this.goodsTypesDetailList.find(l => l.goodsId === this.shop.goodsId)
          var goodsName = goodsObj.goodsName
        }
        const priceType = this.query.priceType
        const price = this.query.price
        const priceCg = this.priceTypeDetail
        if (!goodsId) {
          this.$message.error('请选择商品')
          return
        }
        if (!priceType) {
          this.$message.error('请选择报价类型')
          return
        }
        if (!price) {
          this.$message.error('请输入报价')
          return
        } else {
          var reg = /(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0)$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/
          if (!reg.test(price)) {
            this.$message.error('价格输入有误，请重新输入')
            return
          }
          if (price < 0) {
            this.$message.error('价格不能小于0')
            return
          }
        }
        var spFee = 0; var lpFee = 0; var tpFee = 0; var baseFloorFee = 0
        var b_sp = this.query.radio1
        if (b_sp === 2) {
          spFee = this.query.spFee
          if (!spFee) {
            this.$message.error('您选择自定义配送费却没有输入具体的值,请输入')
            // $('#txt_price_define_spfee').textbox('textbox').focus()
            return
          }
          spFee *= 100
          spFee = Number(spFee.toFixed(0))
          spFee = (spFee << 1) | 1
        } else {
          spFee = 0
        }
        var b_lp = this.query.radio2
        if (b_lp === 2) {
          baseFloorFee = this.query.baseFloorFee
          lpFee = this.query.lpFee
          if (!lpFee) {
            this.$message.error('您选择自定义上楼费却没有输入具体的值,请输入')
            // $('#txt_price_define_lpfee').textbox('textbox').focus()
            return
          }
          lpFee *= 100
          lpFee = Number(lpFee.toFixed(0))
          lpFee = (lpFee << 1) | 1
          baseFloorFee = baseFloorFee * 1
        } else {
          lpFee = 0
        }

        var b_tp = this.query.radio3
        if (b_tp === 2) {
          tpFee = this.query.tpFee
          if (!tpFee) {
            this.$message.error('您已选择自定义服务费却没有输入具体的值,请输入')
            // $('#txt_price_define_tpfee').textbox('textbox').focus()
            return
          }
          tpFee *= 100
          tpFee = Number(tpFee.toFixed(0))
          tpFee = (tpFee << 1) | 1
        } else {
          tpFee = 0
        }

        var params = {
          gtId: gtInfo.gtId,
          gtName: gtInfo.gtName,
          goodsId: goodsId,
          goodsName,
          priceType: priceType,
          price: price,
          priceCgId: priceCg.priceCgId,
          orgId: priceCg.orgId,
          orgName: priceCg.orgName,
          orgSNNo: priceCg.orgSNNo,
          spFee: spFee,
          lpFee: lpFee,
          baseFloorFee: baseFloorFee,
          tpFee: tpFee
        }
        const res = await queryPriceTypeAddPrice(params)
        if (res.success) {
          this.$message.success('新增成功')
          this.reset()
          this.$emit('refresh')
        }

        // $dlh.cmct.post({
        //   url: 'page/sys/price/define/priceCgDetail/add',
        //   contentType: 'application/json',
        //   data: JSON.stringify(formData
        // }, function(rlt) {
        //   if (rlt.exc != null) {
        //     this.$message.error(rlt.exc)
        //     return
        //   }
        //   $dlh.toast.info('操作成功')
        //   _this.close()
        //   sys_price_define.current.queryPriceCgDetail()
        // })
      },
      reset() {
        this.$nextTick(() => {
          this.visible = false
          this.shop = {
            gtId: null,
            goodsId: null
          }
          this.gtInfo = {}
          this.temp = {}
          this.priceTypeDetail = {}
          this.query = {
            spFee: null,
            lpFee: null,
            baseFloorFee: null,
            tpFee: null,
            gtTree: 0,
            goods: 0,
            radio1: 1,
            radio2: 1,
            radio3: 1
          }
        })
      }
    }
  }
</script>

<style lang='scss' scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  & /deep/ .el-form-item {
    width: 100%;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}

.prompt {
  color: red;

  span {
    color: blue;
  }
}
</style>
